<template>
	<v-content ref="content" padding-top="100" single>
		<div class="close"></div>
		<div class="title padding">手机号注册/登录</div>
		<div class="tip padding">未注册的手机号将自动创建账户</div>
		<div class="tab">
			<div
				class="tab-item"
				:class="[
					{
						active: type === 'sms',
					},
				]"
				@click="type = 'sms'"
			>
				验证码登录
			</div>
			<div
				class="tab-item"
				:class="[
					{
						active: type === 'password',
					},
				]"
				@click="type = 'password'"
			>
				密码登录
			</div>
		</div>

		<div class="form-item auto-height">
			<div class="value">
				<div class="area-code">+86</div>
				<input v-model="formData.phone" type="number" class="input" placeholder="验证码登录" maxlength="11" />
			</div>
		</div>
		<div class="form-item auto-height" v-show="type === 'sms'">
			<div class="value">
				<input v-model="formData.smsCode" type="text" class="input" placeholder="请输入短信验证码" />
				<div
					class="send-code"
					:class="[
						{
							disabled: veCodeTime < 60,
						},
					]"
					@click="sendCode(formData.phone)"
				>
					{{ veCodeText }}
				</div>
			</div>
		</div>
		<div class="form-item auto-height" v-show="type === 'password'">
			<div class="value">
				<input v-model="formData.password" type="password" class="input" placeholder="请输入密码" />
				<!-- <input v-model="formData.password" :password="!pwdVisible" class="input" placeholder="请输入密码" />
				<uni-icons
					:type="pwdVisible ? 'eye' : 'eye-slash'"
					size="20"
					@click="pwdVisible = !pwdVisible"
				></uni-icons> -->
			</div>
		</div>
		<div class="button primary bg radius" @click="onLogin">确认登录</div>
		<div class="agree">
			<div class="checkbox primary" :class="[{ active: argee }]" @click="argee = !argee"></div>
			登录即代表您已同意
			<span class="primary" @click="toPage('/pages/mine/agreement', { type: '0' })">《{{ message.title }}》</span>
		</div>
		<div class="agree" style="justify-content: center">
			还没有账号？
			<span class="primary" @click="toPage('/pages/login/register')">立即注册</span>
		</div>
	</v-content>
</template>

<script>
import mixins from "@/mixins"
import smsMixin from "@/mixins/vecode"
import MD5 from "js-md5"

export default {
	name: "login",
	mixins: [
		mixins,
		smsMixin({
			url: "/api/sendCode",
			type: "1",
		}),
	],
	data() {
		return {
			formData: {
				phone: "",
				smsCode: "",
				password: "",
			},
			argee: false,
			message: "",

			type: "sms", // sms password
			pwdVisible: false,
		}
	},
	computed: {
		submitUrl() {
			if (this.type === "sms") {
				return "/memberLogin/codeLogin"
			}
			return "/memberLogin/accountLogin"
		},
		submitData() {
			if (this.type === "sms") {
				return {
					phone: this.formData.phone,
					smsCode: this.formData.smsCode,
				}
			}
			return {
				phone: this.formData.phone,
				password: MD5(this.formData.password),
			}
		},
	},
	methods: {
		init() {
			this.getMessage()
		},
		async onLogin() {
			try {
				if (!this.formData.phone) {
					throw "请输入手机号"
				}
				if (this.formData.phone.length !== 11 || this.formData.phone[0] != "1") {
					throw "请输入正确的手机号"
				}
				if (this.type === "sms") {
					if (!this.formData.smsCode) {
						throw "请输入验证码"
					}
				} else {
					if (!this.formData.password) {
						throw "请输入密码"
					}
				}

				if (!this.argee) {
					uni.showModal({
						title: "提示",
						content: "是否同意用户协议?",
						success: res => {
							if (res.confirm) {
								this.argee = true

								this.onLogin()
							}
						},
					})

					return
				}

				const data = await this.$http({
					url: this.submitUrl,
					method: "POST",
					data: this.submitData,
				})

				uni.setStorageSync("token", data.token)
				uni.setStorageSync("refresh_token", data.refreshToken)
				const userInfo = await this.$axios.get("/api/member/member/info", {
					id: data.id,
				})
				this.$store.commit("setUserInfo", userInfo)
				uni.showToast({
					title: "登录成功",
					icon: "success",
				})
				setTimeout(() => {
					this.toPage("/pages/index/index", "reLaunch")
				}, 1200)
			} catch (error) {
				this.showMessage.error(error)
			}
		},
		async getMessage() {
			this.message = await this.$axios.get("/api/system/protocol/getByCode?code=USER")
		},
	},
}
</script>

<style lang="scss" scoped>
.close {
	--width: 50rpx;

	position: relative;
	margin-left: 30rpx;
	width: var(--width);
	height: var(--width);
	&::before {
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
		width: 2rpx;
		height: 100%;
		background-color: #000;
		transform: rotate(45deg);
	}
	&::after {
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
		width: 2rpx;
		height: 100%;
		background-color: #000;
		transform: rotate(-45deg);
	}
}

.title {
	font-weight: 700;
	font-size: 40rpx;
	padding-top: 105rpx;
	padding-bottom: 10rpx;
	color: #333;
}
.tip {
	font-size: 26rpx;
	color: #666;
	letter-spacing: 2rpx;
}
.tab {
	padding-top: 80rpx;
	padding-bottom: 20rpx;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	margin-bottom: 25rpx;
	.tab-item {
		padding-inline: 30rpx;
		font-size: 30rpx;
		font-weight: 700;
		position: relative;
		padding-bottom: 20rpx;
		&::before {
			content: "";
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			margin: auto;
			height: 10rpx;
			border-radius: 100px;
			background: $primary;
			width: 1em;
			opacity: 0;
		}
		&.active {
			&::before {
				opacity: 1;
			}
		}
	}
}

.form-item {
	padding-block: 20rpx;
	.value {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		.input {
			background: #fff;
			flex: 1;
			font-size: 26rpx;
			height: 60rpx;
		}

		.area-code {
			border-right: 1px solid #000;
			color: #333;
			height: 1.2em;
			padding-right: 20rpx;
			font-size: 30rpx;
		}
		.send-code {
			font-size: 26rpx;
			color: $primary;
			&.disabled {
				color: #ccc;
			}
		}
	}
}

.button {
	margin: auto;
	margin-top: 120rpx;
	width: 660rpx;
	height: 90rpx;
}

.agree {
	width: 660rpx;
	font-size: 24rpx;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	margin: auto;
	line-height: 4;
	color: #666;
}
</style>
